<template>
    <div class="app-container">
        <el-row :gutter="20" >
            <el-col :span="4" :xs="24" id="l_tree" :style="'height:'+ht+'px;'" >
                <el-tree v-loading="loadtreeing" default-expand-all :data="xzqhOptions" node-key="orgCd" :props="defaultProps" @node-click="handleNodeClick"  ></el-tree>
            </el-col>
            <el-col :span="20" :xs="24" style="padding-left:15px; " >
                <el-form :model="queryParams" ref="queryForm" :inline="true" >
                    <!-- <el-form-item>
                            <treeselect v-model="queryParams.adCode" :options="xzqhOptions" :normalizer="normalizer"
                                :show-count="true" placeholder="行政区划" />
                    </el-form-item> -->
                    <el-form-item>
                        <el-date-picker v-model="queryParams.mon" size="small" value-format="yyyy-01"
                            type="year" placeholder="请选择（年）" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>

                <div class="tb_title" > {{ orgNm }} {{detailTime}}逐月水量表</div>
                <div class="tb_dw" >单位：<span>万m³</span></div>

                <el-table :data="wmList" :height="tableHeight" :span-method="cellMerge" border  style="width: 100%; margin-top: 30px" >
                    <!-- <el-table-column  prop="wagaName" label="所属闸点" width="180" align="center" ></el-table-column> -->
                    <el-table-column  prop="orgNm" label="水管机构" width="200" align="left" ></el-table-column>
                    <el-table-column  prop="s1" label="1月" align="center" ></el-table-column>
                    <el-table-column  prop="s2" label="2月" align="center" ></el-table-column>
                    <el-table-column  prop="s3" label="3月" align="center" ></el-table-column>
                    <el-table-column  prop="s4" label="4月" align="center" ></el-table-column>
                    <el-table-column  prop="s5" label="5月" align="center" ></el-table-column>
                    <el-table-column  prop="s6" label="6月" align="center" ></el-table-column>
                    <el-table-column  prop="s7" label="7月" align="center" ></el-table-column>
                    <el-table-column  prop="s8" label="8月" align="center" ></el-table-column>
                    <el-table-column  prop="s9" label="9月" align="center" ></el-table-column>
                    <el-table-column  prop="s10" label="10月" align="center" ></el-table-column>
                    <el-table-column  prop="s11" label="11月" align="center" ></el-table-column>
                    <el-table-column  prop="s12" label="12月" align="center" ></el-table-column>
                    <el-table-column  prop="sc" label="小计" width="150" align="center" ></el-table-column>
                </el-table>
            </el-col>
        </el-row>
        

    </div>
</template>

<script>
import { listwmu, getxzqh } from "@/api/measurement/waterstatistics"
import { organtreeList } from "@/api/common"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "watermonitor",
    components: { Treeselect },
    dicts: ['sys_chan_level'],
    data() {
        return {
            // 行政区划树选项
            xzqhOptions: [],
            // 遮罩层
            loading: true,
            // 岗位表格数据
            wmList: [],
            stList:[],
            chList:[],
            detailTime:'',
            // 查询参数
            queryParams: {
                orgCd: 'ORG6543220000',
                chanName: undefined,
                mon: '',
                stName: undefined
            },
            tableData: [],
            spanArr: [],
            pos: 0,
            tableHeight: 600,
            pickerOptions:{
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            defaultProps: {
                children: 'children',
                label: 'orgNm'
            },
            ht: 400,
            loadtreeing: true,
            orgNm:""
        };
    },
    created() {
        var htd = document.body.clientHeight*0.85;
        this.ht = htd;
        this.getHeight();
        this.getTreeselect();
        //this.getList();
    },
    methods: {
        handleNodeClick(data) {
            if (data) {
                this.queryParams.orgCd = data.orgCd;
                //this.getTableYearMonth();
                this.orgNm = data.orgNm;
                this.handleQuery();
            }
        },
        /** 获取浏览器高度并计算得到表格所用高度。 */
        getHeight(){
            this.tableHeight=document.documentElement.clientHeight-230;
        },
        dealWithTime(data) {
            let Y = data.getFullYear();
            return Y + "年" ;
        },
        getSpanArr(data) {
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].waganame == data[i - 1].waganame) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
        },
        cellMerge({ row, column, rowIndex, columnIndex }) {
            return;
           if (columnIndex === 0) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                 rowspan: _row,
                 colspan: _col
              }
           }
        },
        /** 查询行政区域下拉树结构 */
        getTreeselect() {
            this.loadtreeing = true;
            organtreeList().then(response => {
                this.xzqhOptions = this.handleTree(response.data,"orgCd","parentOrgCd");
                let sgdata = this.xzqhOptions;
                this.queryParams.orgCd = sgdata[0].orgCd;
                this.orgNm = sgdata[0].orgNm;
                this.getList();
                this.loadtreeing = false;
            });
        },
        /** 查询测站列表 */
        getList() {
            this.loading = true;
            listwmu(this.queryParams).then(response => {
                    let that=this;
                    this.loading = true;
                    let qtime=''
                    if(this.queryParams.mon=='' || this.queryParams.mon == undefined){
                        qtime=new Date();
                    }else{
                        qtime=new Date(this.queryParams.mon);
                    }
                    this.wmList = response.data;
                    this.getSpanArr(this.wmList);
                    let stcodeset = new Set();
                    for (let i = 0; i < this.wmList; i++) {
                        //
                        if (stcodeset.has(this.wmList[i].stcode)) {

                        } else {
                            this.resList.push(this.wmList[i]);
                        }
                    }
                    /**数据拆分
                     * */
                    that.detailTime = that.dealWithTime(qtime);
                    this.loading = false;
            })
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.adCode,
                label: node.adName,
                children: node.children
            };
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .tb_title{
        width: 370px;
        text-align: center;
        margin: 5px auto;
        font-weight: 700;
    }

    .tb_dw{
        font-size: 13px;
        position: absolute;
        top: 90px;
        right: 40px;
        span{
            color: #349EDF;
        }
    }

    .el-form-item--medium .el-form-item__content {
        line-height: 30px;
    }

    .vue-treeselect__placeholder, .vue-treeselect__single-value {
        line-height: 30px;
    }

    .vue-treeselect {
        width: 215px;
        height: 30px;
        .vue-treeselect__control {
            height: 30px;
            .el-form-item--medium .el-form-item__content {
                line-height: 30px;
                .vue-treeselect__placeholder, .vue-treeselect__single-value {
                    line-height: 30px;
                }
            }
        }
    }

    #l_tree{
        padding-right:15px; 
        border-right: 1px solid #e5e5e5;
        min-height: 600px;
        overflow-x: auto;
    }

    #l_tree::-webkit-scrollbar{
        width: 0px; /*对垂直流动条有效*/
    }

</style>
